<template>
  <div class="home">
    <div class="swiper-container">
      <ul class="swiper-wrapper">
        <li class="swiper-slide">
          <img/>
        </li>
        <li class="swiper-slide">
          <img/>
        </li>
        <li class="swiper-slide">
          <img/>
        </li>
        <li class="swiper-slide">
          <img />
        </li>
      </ul>
    </div>
    <ul class="sangongge">
      <li class="sangongge-li">
        <img class="sangongge-img"  />
        <p class="sangongge-p">特色课</p>
      </li>
      <li class="sangongge-li">
        <img class="sangongge-img" />
        <p class="sangongge-p">一对一辅导</p>
      </li>
      <li class="sangongge-li">
        <img class="sangongge-img"  />
        <p class="sangongge-p">学习日历</p>
      </li>
    </ul>
  </div>
</template>

<script>
import Swiper from "swiper/js/swiper.min.js";
import "swiper/css/swiper.min.css";
export default {
  name: "homepage",
  data() {
    return {};
  },
  methods: {
    initSwiper() {
      new Swiper(".swiper-container", {
        loop: true, //循环模式选项
        autoplay: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true //修改swiper的父元素时，自动初始化swiper
      });
    }
  },
  mounted() {
    this.initSwiper();
  }
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.swiper-container {
  width: 100%;
  z-index: 1;
}
.swiper-wrapper {
  width: 400%;
}
.swiper-slide {
  width: 100%;
}
img {
  width: 100%;
  flex: 1;
}
.sangongge {
  width: 100%;
  height:25%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 206px;
  z-index: 3;
}
.sangongge-li {
  width: 112px;
  height: 112px;
  background: blue;
  text-align: center;
  margin: 10px;
  border-radius: 10px;
}
.sangongge-img {
  width: 23px;
  height: 22px;
  margin:20px auto;
}
.sangongge-p {
  font-weight: 400;
  color: #8c8c8c;
  margin: 0 auto;
  text-align: center;
}
</style>
